<template>
  <div style="margin: 20px">
    <a-table :columns="columns" :data="data" @cell-dblclick="gg">
      <template #tr>
        <tr
          class="my-tr"
          style="background: red; border: 1px solid red"
          @contextmenu="onContextMenu"
        />
      </template>
      <template #td="{ column }">
        <td :class="column.dataIndex == 'name' ? 'my-td' : ''" />
      </template>
    </a-table>
  </div>
</template>

<script>
export default {
  setup() {
    const onContextMenu = () => {
      console.log('right click');
    };

    const columns = [
      {
        title: 'Name',
        dataIndex: 'name',
        slotName: 'name'
      },
      {
        title: 'Salary',
        dataIndex: 'salary'
      },
      {
        title: 'Address',
        dataIndex: 'address'
      },
      {
        title: 'Email',
        dataIndex: 'email'
      }
    ];
    const data = [
      {
        key: '1',
        name: 'Jane Doe',
        salary: 23000,
        address: '32 Park Road, London',
        email: 'jane.doe@example.com'
      },
      {
        key: '2',
        name: 'Alisa Ross',
        salary: 25000,
        address: '35 Park Road, London',
        email: 'alisa.ross@example.com'
      },
      {
        key: '3',
        name: 'Kevin Sandra',
        salary: 22000,
        address: '31 Park Road, London',
        email: 'kevin.sandra@example.com'
      },
      {
        key: '4',
        name: 'Ed Hellen',
        salary: 17000,
        address: '42 Park Road, London',
        email: 'ed.hellen@example.com'
      },
      {
        key: '5',
        name: 'William Smith',
        salary: 27000,
        address: '62 Park Road, London',
        email: 'william.smith@example.com'
      }
    ];
    const gg = (a, b, c) => {
      console.log(a, b, c);
    };
    return {
      columns,
      data,
      onContextMenu,
      gg
    };
  }
};
</script>
<style scoped lang="less">
.my-tr {
  border: 1px solid red;
}
.my-td {
  border-left: 1px solid red;
}
</style>
